<template>
	<view :style="$theme.pageStyle">
		<view class='commission-details'>
			<timeSlot @changeTime="changeTime"></timeSlot>
			<view class='sign-record'>
				<!-- <view class="top_num" v-if="recordType != 4 && DataList.length">
					支出：¥{{expend || 0}} &nbsp;&nbsp;&nbsp; 收入：¥{{income || 0}}
				</view> -->
				<view class="box">
					<block v-for="(item,index) in DataList" :key="index" v-if="DataList.length>0">
						<view class='list'>
							<view class='item' style="background: #fff;">
								<!-- <view class='data'>{{item.time}}</view> -->
								<view class='listn'>
									<!-- <block v-for="(child,indexn) in item.child" :key="indexn"> -->
									<view class='itemn1 acea-row row-between-wrapper'>
										<view>
											<view class='name line1'>
												{{item.remark}}
												<text class="status_badge success" v-if="item.status == 1">审核通过</text>
												<text class="status_badge default"
													v-if="item.status == 0">待审核</text>
												<text class="status_badge error"
													v-if="item.status == 2">审核未通过</text>
												<!-- 提现记录： 0 待审核 1 通过 2 未通过 -->
											</view>
											<view class="mark" v-if="item.status == 2">原因：{{item.reason}}
											</view>
											<view>{{item.add_time}}</view>
										</view>
										<view>
											<view class='num'> - {{item.money}}</view>
											<view class="fail">到账 {{item.amt}} </view>
										</view>
									</view>
									<!-- </block> -->
								</view>
							</view>
						</view>
					</block>
				</view>
				<view v-if="DataList.length == 0">
					<u-empty
					        mode="data"
							style="margin-top: 50px;"
					>
					</u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import timeSlot from '../components/timeSlot/index.vue'
	import $H from '@/common/js/request.js';
	export default {
		components: {
			timeSlot
		},
		data() {
			return {
				name: '',
				keyword: '',
				DataList: [],
				current: 0,
				hasMore: false,
				loading: true,
				isLoading: false,
				ShowLoading: true,
				scroll: false,
				status: 0,
				pages: 1,
				limit: 15,
				page: 0,
				out: 0,
				start: 0,
				stop: 0,
				total: 0,
			};
		},
		onLoad() {
			this.timeer()
		},
		onReachBottom() {
			this.GetData();
		},
		methods: {
			changeTime(time) {
				console.log(time)
				this.start = time.start
				this.stop = time.stop
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			timeer() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			GetData(e) {
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.post('withdraw/withdrawlog', {
						'page': page,
						'limit': this.limit,
						'start': this.start,
						'stop': this.stop,
					}, {
						token: true
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.data;
							for (let i = 0; i < list.length; i++) {
								//将数据逐条写入数组
								this.DataList.push(list[i]);
							}
							this.total = res.data.total
							this.pages = res.data.last_page;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							setTimeout(() => {
								this.ShowLoading = false
							}, 1000);

							this.out = 1;
							if (this.page == this.pages || res.data.total == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			submitForm() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},

		},
	}
</script>

<style scoped lang="scss">

	.box {
		border-radius: 24rpx;
		margin: 0 20rpx;
		overflow: hidden;
	}

	.commission-details .search .input .placeholder {
		color: #bbb;
	}

	.commission-details .search .input .iconfont {
		position: absolute;
		left: 28rpx;
		color: #999;
		font-size: 28rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.sign-record {
		margin-top: 20rpx;
	}

	.commission-details .promoterHeader .headerCon .money {
		font-size: 36rpx;
	}

	.top_num {
		padding: 10rpx 30rpx 30rpx 30rpx;
		font-size: 24rpx;
		color: #999;
	}

	.radius15 {
		border-radius: 14rpx 14rpx 0 0;
	}

	.sign-record .list .item .listn .itemn1 {
		border-bottom: 1rpx solid #eee;
		padding: 22rpx 24rpx;
	}

	.sign-record .list .item .listn .itemn1 .name {
		width: 390rpx;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 12rpx;
	}

	.sign-record .list .item .listn .itemn1 .num {
		font-size: 36rpx;
		color: #333333;
		font-family: 'Regular';
		text-align: right;
	}

	.sign-record .list .item .listn .itemn1 .num.font-color {
		color: #e93323 !important;
	}

	.sign-record .list .item .listn .itemn1 .fail {
		color: #E93323;
		margin-top: 14rpx;
		text-align: right;
	}

	.sign-record .list .item .listn .itemn1 .wait {
		color: #FF7D00;
		margin-top: 14rpx;
		text-align: right;
	}

	.mark {
		margin-bottom: 10rpx;
	}

	.status_badge {
		display: inline-block;
		height: 40rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin-left: 16rpx;
		padding: 0 12rpx 0;
	}

	.success {
		background: rgba(24, 144, 255, .1);
		color: #1890FF;
	}

	.default {
		background: #FFF1E5;
		color: #FF7D00;
	}

	.error {
		background: #FDEBEB;
		color: #F53F3F;
	}
	
	.acea-row {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}
	
	.acea-row.row-between-wrapper {
		-webkit-box-align: center;
		-moz-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: justify;
		-moz-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between
	}
	
</style>